<template>
	<view>
		<view class="top">
			<view class="top_left" @click="onCiNavigator">&lt</view>
			<view class="top_center">确认订单</view>
			<view class="top_time">时间</view>
		</view>
		<view class="common">
			<view class="rgb"></view>
			<view class="gray"></view>
			<view class="position">
				<view class="one">
					<view class="one-context">
						<image src="../../static/bgUrl.png" mode=""></image>
						<view class="one-right">
							<view class="one-right-xia">
								<view class="qqq">
									疯狂的外星人<text style="font-size: 22rpx;">1张</text>
								</view>
								<view class="qqq_1">原价￥54</view>
							</view>
							<view>今天5-24 16:30~17:50</view>
							<view>太平洋电影城(北京中国村店)</view>
							<view>1号激光亭 6排15座</view>
						</view>
					</view>
					<view class="one_xia">
						<view class="">
							<i class="iconfont icon-cuowukongxin" style="color: #fb3777;"/>不支持退票
						</view>
						<view class="">
							<i class="iconfont icon-cuowukongxin" style="color: #fb3777;"/>超出可改签时间
						</view>
						<view style="color: rgb(116, 166, 220);">
							退改签详情
						</view>
					</view>
				</view>
				<view class="two">
					<view class="one-contexts">
						<view class="two-one">
							<view class="two_one">
								<view class="ka">银行卡支付</view>
								<button class="btn">最高立减10元</button>
							</view>
							<view style="color: rgb(186, 186, 186); margin-left: 80%;">未使用</view>
						</view>
						<view style="margin-left: 60%;">
							票价总计：<text style="color: #fb3777;font-size: 34rpx;">￥54</text>
						</view>
					</view>
				</view>

				<view class="three">
					<view class="one-contextss">
						<image src="../../static/vip.png" mode=""></image>
						<view class="three_one">
							<view class="">太平洋超值观……</view>
							<view class="">开卡后，本单立减5元</view>
						</view>

					</view>

				</view>

				<view class="four">
					<view class="one-contextsss">
						<view class="two_one">
							<view class="">小食和商品</view>
							<view style="color: gray;">
								边吃边看更爽哦~
							</view>
						</view>
						<view class="four-one">
							<image src="../../static/bmh.jpg" mode=""></image>
							<view >
								<text style="color: orange; border: orange;">单人</text>32oz爆米花1桶+Q+苏大水1瓶
								<view style="display: flex;justify-content: space-between; margin-top: 20rpx;">
									<view style="color: #fb3777;">
										￥29.87
									</view>
									<view style="color: #fb3777;">
										<i class="iconfont icon-jia" />
									</view>
								</view>
							</view>

						</view>
						<view class="four-one">
							<image src="../../static/bmh.jpg" mode=""></image>
							<view >
								<text style="color: orange; border: orange;">单人</text>32oz爆米花1桶+Q+苏大水1瓶
								<view style="display: flex;justify-content: space-between; margin-top: 20rpx;">
									<view style="color: #fb3777;">
										￥29.87
									</view>
									<view style="color: #fb3777;">
										<i class="iconfont icon-jia" />
									</view>
								</view>
							</view>

						</view>

						<view class="four-one">
							<image src="../../static/bmh.jpg" mode=""></image>
							<view >
								<text style="color: orange; border: orange;">单人</text>32oz爆米花1桶+Q+苏大水1瓶
								<view style="display: flex;justify-content: space-between; margin-top: 20rpx;">
									<view style="color: #fb3777;">
										￥29.87
									</view>
									<view style="color: #fb3777;">
										<i class="iconfont icon-jia"/>
									</view>
								</view>
							</view>

						</view>
						<view style="padding:30rpx 10rpx; margin-left: 60%;">
							小食总计：<text style="color: #fb3777;font-size: 34rpx;">￥0</text>
						</view>
					</view>
				</view>


				<view class="five">
					<view class="one-contexts">
						<view class="two_one">
							<view class="">购票须知</view>
						</view>
						<view style="color: gray;">
							<view class="">
								1.请确认场次和时间无误,购买成功后将不予退换
							</view>
							<view class="">
								2.由于设备故障等不可抗力因素,存在少量场次取消的情况,会进行退票退款
							</view>
							<view class="">
								3.由于影院系统不稳定等因素,存在出票失败的情况
								会进行退款
							</view>
							<view class="">
								4.取票码可以在“我的-电影票”中查看
							</view>
							<view class="">
								5下苗肌代丰你同音《淘要要田户昭冬协i》
							</view>
						</view>
					</view>


				</view>

			</view>
		</view>
		<view class="bottom">
			<view class="bottom_top">
				<view style="color: #fb3777;font-size: 34rpx; width: 63%;">￥{{num*54}}</view>
				<button class="btns">立即付款</button>
			</view>

		</view>
	</view>
</template>

<script>
	import "../../static/font_3927971_5qkddfqthnm/iconfont.css"
	export default {
		data() {
			return {
				num:""
			}
		},
		onLoad(option) {
			this.num = option.SelectNum
		},
		methods: {
			//路由返回事件
			onCiNavigator(){
				uni.navigateBack({
					data:1
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.one-contextss {
		font-size: 26rpx;
		padding: 30rpx;
		display: flex;

		image {
			width: 130rpx;
			height: 100rpx;
		}

		.three_one {
			margin-left: 5%;
		}
	}

	.four-one {
		display: flex;
		border-bottom: 1rpx solid gainsboro;
		padding: 20rpx;
		image{
			width: 130rpx;
			height: 160rpx;
		}
	}

	.top {
		background-color: rgb(251, 55, 119);
		color: white;
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		padding: 10rpx 0rpx;
		position: sticky;
		top: 0;
		border-bottom: 1rpx solid white;
		z-index: 1;
	}

	.top_left,
	.top_center,
	.top_time {
		margin-top: 30rpx;
	}

	.top_left {
		font-size: 50rpx;
	}

	.common {
		width: 100%;
		/* height: 2000rpx; */
	}

	.one-context {
		border-bottom: 1rpx solid rgb(245, 245, 245);

	}

	.rgb {
		background-color: rgb(251, 55, 119);
		height: 150rpx;
		width: 100%;
		z-index: 0;
	}

	.gray {
		background-color: gray;
	}

	.position {
		position: relative;
		width: 95%;
		margin: 0 auto;
		top: -120rpx;
	}

	.one,
	.two,
	.three,
	.four,
	.five {
		/* padding: 30rpx; */
		background-color: white;
		width: 98%;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.one-contextsss {
		padding: 30rpx;
	}

	.one-context {

		display: flex;
		padding: 30rpx;

	}

	image {
		width: 25%;
		height: 225rpx;
		border-radius: 20rpx;
	}

	.one-right {
		width: 68%;
		margin-left: 2%;
		font-size: 26rpx;
		color: rgb(165, 179, 193);
	}


	.one_xia {
		display: flex;
		font-size: 28rpx;
		color: rgb(194, 202, 193);
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}

	.one-right-xia {
		display: flex;
		justify-content: space-between;

		.qqq,
		.qqq_1 {
			font-size: 34rpx;
			color: black;
		}

	}

	.one-contexts {
		padding: 30rpx;
	}

	.two {
		font-size: 30rpx;
	}

	// .two-one {
	// 	border-bottom: 1rpx solid rgb(186, 186, 186);
	// }

	.two_one {
		display: flex;
		justify-content: space-between;
		width: 100%;
		border-bottom: 1rpx solid gainsboro;
		padding: 20rpx;

		.ka {
			width: 80%;
		}

		.btn {
			background-color: rgb(254, 239, 243);
			color: rgb(251, 78, 131);
			border: 0rpx;
			height: 50rpx;
			line-height: 50rpx;

		}
	}


	/*吸底 */
	.bottom {
		width: 100%;
		height: 150rpx;
		background-color: white;
		position: sticky;
		z-index: 1;
		bottom: 0;
		.bottom_top{
			padding: 30rpx;
			// width:100%;
			display: flex;
			justify-content: space-between;
			top: 20rpx;
		}
		.btns{
			width: 45%;
			background-color: rgb(251, 55, 119);
			color: white;
			border-radius: 40rpx;
		}
	}
</style>